<template>
  <el-dialog
    v-if="visible"
    :close-on-click-modal="false"
    :visible.sync="visible"
    append-to-body
    width="80%"
    top="5vh"
    class="detail-panel"
  >
    <el-row class="panel-row">
      <el-col :span="18" class="p-title">
        <div class="c-type">客户</div>
        <div class="c-tip">{{ customerInfo.customerName }}</div>
      </el-col>
      <el-col
:span="6" class="p-btn"
        ><div>
          <el-button v-if="sourceType==='default'"  @click.native="deleteCustomer">删 除</el-button>
          <el-button v-if="sourceType==='default'" @click.native="editCustomer" type="warning">编 辑</el-button>
          <el-button @click.native="close" type="danger">关 闭</el-button>
        </div></el-col
      >
    </el-row>
    <el-descriptions :colon="false" direction="vertical" :column="3">
        <el-descriptions-item label="客户级别">
           <el-tag size="small" class="wp-tag--dark" :color="formatterLevelColor(customerInfo.level)">{{ formatterLevel(customerInfo.level)||'--' }}</el-tag>
          </el-descriptions-item>
        <el-descriptions-item label="负责人">{{customerInfo.chargePersonName||'--'}}</el-descriptions-item>
        <el-descriptions-item label="来源渠道">{{ customerInfo.channelName||'--' }}</el-descriptions-item>
    </el-descriptions>
    <div class="panel-container">
      <el-row :gutter="20">
        <el-col :span="17">
          <div class="panel-content left">
            <el-tabs type="border-card"  @tab-click='handleTabClick' value="1">
              <el-tab-pane name="1" lazy :key="k1">
                <span slot="label">
                  <svg-icon icon-class="contact" />
                  联系人</span>
                  <Contacts-box :param="customerInfo" updateOpt />
              </el-tab-pane>
              <el-tab-pane  name="2" lazy :key="k2">
                <span slot="label">
                  <svg-icon icon-class="contact" />
                  订单</span>
                <Order-box  :param="customerInfo" :sourceType="sourceType"/>
              </el-tab-pane>
              <el-tab-pane  name="3" lazy :key="k3">
                 <span slot="label"><svg-icon icon-class="contact" />
                  合同</span>
                <Contract-box  :param="customerInfo"/>
              </el-tab-pane>
               <el-tab-pane name="4" lazy :key="k4">
               <span slot="label"><svg-icon icon-class="contact" />
                  回访</span>
                <Customer-vist-box :param="customerInfo"/>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="panel-content right">
            <el-tabs type="border-card"  class="base-info-card">
              <el-tab-pane>
                <span slot="label"><i class="el-icon-date"></i> 基本信息</span>
                <el-descriptions class="wp-descriptions" label-class-name="wp-descriptions__label"  content-class-name="wp-descriptions__content" direction="vertical" :column="1">
                  <el-descriptions-item label="客户名称">{{ customerInfo.customerName||'--' }}</el-descriptions-item>
                  <el-descriptions-item label="客户级别">
                  <el-tag size="small" class="wp-tag--dark" :color="formatterLevelColor(customerInfo.level)">{{ formatterLevel(customerInfo.level)||'--' }}</el-tag>
                  </el-descriptions-item>
                   <el-descriptions-item label="来源渠道">{{ customerInfo.channelName||'--' }}</el-descriptions-item>
                  <el-descriptions-item label="手机号码">{{ customerInfo.mobile||'--' }}</el-descriptions-item>
                  <el-descriptions-item label="传真号码">{{ customerInfo.fax||'--' }}</el-descriptions-item>
                  <el-descriptions-item label="邮箱">{{ customerInfo.email||'--' }}</el-descriptions-item>
                  <el-descriptions-item label="负责人">{{ customerInfo.chargePersonName||'--' }}</el-descriptions-item>
                  <el-descriptions-item label="省/市/区">{{showAddress()}}</el-descriptions-item>
                  <el-descriptions-item label="地址">{{ customerInfo.address||'--' }}</el-descriptions-item>
                  <el-descriptions-item label="备注">{{ customerInfo.remark||'--' }}</el-descriptions-item>
                </el-descriptions>
              </el-tab-pane>
            </el-tabs>
          </div></el-col>
      </el-row>
    </div>
    <Customer-detail  :customerCode="customerInfo.customerCode" ref="customerDetailRef" :title="detailTitle" :show.sync="detialShow" v-if="detialShow" />
  </el-dialog>
</template>
<script>
import { mapGetters } from 'vuex'
import ContactsBox from './detail/ContactsBox'
import ContractBox from './detail/ContractBox'
import CustomerDetail from './detail/CustomerDetail'
import CustomerVistBox from './detail/CustomerVistBox'
import OrderBox from './detail/OrderBox'
import Mixins from './mixins'
export default {
  props: {
    sourceType: {type: String, default: 'default'},
    show: {type: Boolean, defalut: false},
    param: {type: Object,
      default: () => {
        return {}
      }}
  },
  mixins: [Mixins],
  components: { OrderBox, ContactsBox, ContractBox, CustomerVistBox, CustomerDetail },
  watch: {
    param: {
      handler  (val) {
        this.customerInfo = val
      },
      deep: true,
      immediate: true
    },
    show: {
      handler (val) {
        if (val) {
          this.getCustomerInfo(this.customerInfo.customerCode)
        }
        this.visible = val
      },
      immediate: true
    }
  },
  data () {
    return {
      detailTitle: '',
      detialShow: false,
      customerInfo: {},
      k1: 1,
      k2: 2,
      k3: 3,
      k4: 4
    }
  },
  computed: {
    ...mapGetters(['customerLevels']),
    visible: {
      get () {
        return this.show
      },
      set (val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    handleTabClick (tab, event) {
      const name = tab.name
      if (name === 1) {
        this.k1 = Math.random()
      } else if (name === 2) {
        this.k2 = Math.random()
      } else if (name === 3) {
        this.k3 = Math.random()
      } else if (name === 4) {
        this.k4 = Math.random()
      }
    },
    close () {
      this.visible = false
    },
    showAddress () {
      var province = this.customerInfo.province || '--'
      const city = this.customerInfo.city || '--'
      const area = this.customerInfo.area || '--'
      return province + '/' + city + '/' + area
    },
    editCustomer () {
      this.detailTitle = '编辑客户-' + this.customerInfo.customerName
      this.detialShow = true
    },
    deleteCustomer () {
      const customer = this.customerInfo
      this.$msgBox.confirm(
        '确认删除客户【' + (customer.customerName || '') + '】?',
        () => {
          console.log('确认删除客户', customer)
          this.requestOption('customerDelete', customer.id, (res) => {
            this.close()
            this.$parent.initPageList()
          })
        }
      )
    },
    getCustomerInfo (customerCode) {
      this.requestOption('customerGet', customerCode, (res) => {
        this.customerInfo = res.data
        this.visible = true
      })
    },
    formatterLevelColor (value) {
      const level = this.customerLevels.filter(item => {
        if (item.value === value) {
          return item
        }
      })
      return level && level.length > 0 ? level[0].color : ''
    },
    formatterLevel (value) {
      const level = this.customerLevels.filter(item => {
        if (item.value === value) {
          return item
        }
      })
      return level && level.length > 0 ? value + '(' + level[0].label + ')' : value
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-panel >>>.el-dialog__header {
  display: none;
}
.panel-row {
  margin-bottom: 10px;
}
.p-title {
  .c-type {
    color: #666;
    font-size: 12px;
    margin-bottom: 5px;
  }
  .c-tip {
    min-height: 14px;
    margin-top: 8px;
    font-size: 13px;
    color: #333;
    padding-bottom: 2px;
  }
}
.p-btn {
  text-align: right;
  align-items: center;
}
.panel-content {
  border-radius: 4px;
  height: 400px;
  box-shadow: 0px 0px 20px #d3dce6;
}
.right {
  .el-row {
    padding: 10px;
    .el-col {
      padding-top: 2px;
    }
  }
}
.base-info-card {
  height: 400px;
  overflow: auto;
}
.wp-tag--dark{
  color: #fff;
}
/deep/ .el-tabs__content {
  height: calc(100% - 40px) !important;
  padding: 0;
  overflow: auto;
  position: relative;
  font-size: 12px;
}
.wp-descriptions{
  padding: 20px;
}
/deep/ .wp-descriptions__label{
     color: #909399;
}
/deep/ .wp-descriptions__content{
  padding-left: 5px;
  color: #333
}
</style>
